layui.use(['form', 'layer', 'jquery', 'element', 'laytpl', 'element', 'table'], function(){
    var form = layui.form,layer = layui.layer,$ = layui.jquery, laytpl = layui.laytpl, element = layui.element,
    table = layui.table;

    let UserPage = (function(){
        const TEMPLATE = $('#userPageLayer')[0].innerHTML;

        let add = function (setting) {
            const _data = setting.data;
            const _type = setting.type;
            const _url = setting.url;
            let id = Date.now();
            const _parent = setting.parent;

            let dom = $(laytpl(TEMPLATE).render({
                data: _data,
                type: _type,
                url: _url,
                id: id
            }));

            //-----事件------
            //角色切换
            form.on('select(role_selector-' + id + ')', function(data){
                let value = data.value;
                console.info(value);
                switch (value) {
                    case 2: //机构管理员
                        $("#institution_item_" + id).removeClass('layui-hide');
                        break;
                    default:
                        $("#institution_item_" + id).addClass('layui-hide');
                        break;
                }
                form.render("select", 'institution-selector' + id);
            });

            //表单提交
            form.on('submit(submit-' + id + ')', function (data) {
                // console.log("提交");
                // console.log('elem', data.elem); //被执行事件的元素DOM对象，一般为button对象
                // console.log('field', data.field); //当前容器的全部表单字段，名值对形式：{name: value}
                let elem = $(data.elem);
                //禁用提交按钮
                elem.attr('disable', 'disable');

                //过滤掉表单默认的数据
                let field = data.field;
                let keys = Object.keys(field);
                for(let i in keys){
                    if(keys[i] in _data && _data[keys[i]] == field[keys[i]]){
                        delete field[keys[i]];
                    }
                }
                //检查filed是否还有字段
                keys = Object.keys(field);
                if(keys.length == 0){
                    layer.msg('没有可以提交的数据', {icon: 5});
                    return false;
                }
                //添加_data中其他数据
                for(let i in keys){
                    if(! (keys[i] in _data)){
                        field[keys[i]] = _data[keys[i]];
                    }
                }

                //loading动画开关
                let loadingIndex = layer.load(1);
                //提交
                $.ajax({
                    type: "POST",
                    url: "/user/addUser",
                    data: data.field,
                    success: function (res) {
                        if (res.code == 0) {
                            layer.msg('ok', {icon: 6});

                            //刷新表单
                        } else {
                            layer.alert(res.msg || "", {icon: 5});
                        }
                    },
                    error: function (res) {
                        layer.msg("请求失败\n" + (res.status || ""));
                    },
                    complete:function () {
                        layer.close(loadingIndex);
                        //启用提交按钮
                        elem.removeAttr('disable');
                    }
                });

                return false;
            });

            //表单赋值
            form.val("form-" + id,_data);

            $(_parent).append(dom);
            form.render(null, "form-" + id);
        };

        return {
            add: add
        }
    })();


    //更新查询表格
    let hasInitTable = false;
    var tabIns;
    let updateable = function(formData){

        let complete = function () {
            $('#filter-form-submit').removeAttr('disable');
            // window.resizeWindowHeight?window.resizeWindowHeight():'';
        };

        if(!hasInitTable){
            hasInitTable = true;
            //初始化表格
            tabIns = table.render({
                title: '用户查询',
                elem: '#user-table',
                url: '/user/getList',
                method: "POST",
                loading: true,
                width: '100%',
                page: {
                    layout:['refresh', 'prev', 'page', 'next', 'count'],
                },//开启分页
                even: true, //隔行背景
                size: 'lg', //大尺寸的表格
                cellMinWidth: 80,
                toolbar: true,
                defaultToolbar: ['filter', 'print', 'exports'],
                limit: 12,
                cols: [[
                    {field: 'user_name', title: '姓名', width: 160},
                    {field: 'user_number', title: '工号', sort: true, width: 80},
                    {field: 'status', title: '状态', templet: '#template-status', sort: true,width: 120},
                    {field: 'identity', title: '身份证',width: 140},
                    {field: 'role_id', title: '角色',templet: '#template-role' ,width: 120},
                    {field: 'user_mobile', title: '电话', sort: true,width: 130},
                    {field: 'jigou', title: '机构', sort: true,width: 200},
                    {title:'操作',align: 'center',toolbar:'#rowToolbarLayer', width:130, fixed:'right'}
                ]],
                where: formData,
                request: {
                    pageName: 'page', //页码的参数名称，默认：page
                    limitName: 'size' //每页数据量的参数名，默认：limit
                },
                parseData: function(res){ //res 即为原始返回的数据
                    let count = res.data && res.data.count || 0;
                    if(count > 0){ this.where.count = count; } //记录最大记录数
                    // console.log(count);
                    // console.log('this', this);
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": count, //解析数据长度
                        "data": res.data && res.data.data//解析数据列表
                    };
                },

                done: function () {
                    complete();

                }

            });
            // console.log(tabIns);

        }else{
            tabIns.config.where = {}; //清除请求参数
            tabIns = table.reload('user-table' ,{
                where: formData,
                page: {
                    curr: 1, //重新从第 1 页开始
                },
                done: function () {
                    console.log('重载完成');
                    complete();
                },
                error: function (error) {
                    console.log('重载失败', error);
                    complete();
                }
            }); //只重载数据
        }

    };



    //监听tab切换事件
    element.on('tab(mainTable)', function(data){
        console.log(this); //当前Tab标题所在的原始DOM元素
        console.log(data.index); //得到当前Tab的所在下标
        console.log(data.elem); //得到当前的Tab大容器

        let type = $(this).data('type');
        console.log(type);
        switch (type) {
            case 'add':
                UserPage.add({
                    type: 'add',
                    url: 'addUser'
                });
                break;
            case 'search':
                break;
        }
    });

    //预览/编辑面页表单切换
    let switchToEditMode= function(flag){
        if(flag){
            //开启编辑
            $("#form_edit_user .layui-form-item input[name]").removeClass('layui-disabled');

            //隐藏修改按钮
            $('#form_edit_user_edit').addClass("layui-hide");
            setTimeout(function () {
                //显示保存按钮
                $("#form_edit_user_submit").removeClass("layui-hide");
            }, 200)
        }else {
            //预览模式
            $('#form_edit_user .layui-form-item input[name]').addClass('layui-disabled');
            $("#form_edit_user_submit").addClass("layui-hide");
            $('#form_edit_user_edit').removeClass("layui-hide");

        }
    };

    //监听查询用户的过滤表单提交
    form.on('submit(filter-form-submit)', function(data){
        // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
        // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
        // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        let field = data.field;
        //移除空参数
        for(let key in field){
            if(typeof(field[key]) == 'string' && field[key] == ''){
                delete  field[key];
            }
        }
        console.log('field', field);

        //发送请求
        updateable(field);

        //禁用当前按钮
        $(data.elem).attr('disable', 'disable');
        return false;
    });

    //监听表格行工具事件
    table.on('tool(user-table)', function (obj) {
        let data = obj.data; //获得当前行数据
        let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        switch (layEvent) {
            case 'del':
                layer.confirm('是否删除？', {
                    btn: ['确认', '取消'] //可以无限个按钮
                    , yes: function (index, layero) {
                        //删除逻辑
                        $.ajax({
                            url: '/user/delete',
                            type: 'post',
                            data: {
                                user_id: data.user_id
                            },
                            success: function (res) {
                                if (res.code == 200) {
                                    $(tr).remove();
                                    layer.msg('删除成功', {icon: 1, shade: 0.4, time: 1000});
                                } else {
                                    layer.msg('删除失败', {icon: 5, shade: 0.4, time: 1000});
                                }
                            }
                        })
                    }
                });
                break;
            case 'view':
                //编辑
                layer.open({
                    type: 1,
                    title: '查看',
                    content: $('#editUserLayer'),
                    shade: 0.4,
                    area: ['50%', '80%'],
                    btn: '确认',
                    success: function () {
                        //打开成功
                        //禁用编辑
                        form.val('form_edit_user', data);
                        $('#form_edit_user_submit').data('defaultFormData', data);
                        switchToEditMode(false);
                    }
                });
                break;
        }

    });

    updateable(); //更新表格

    //预览表单
    {

        //编辑按钮点击
        $("#form_edit_user_edit").click(function () {
            console.log("点击");
            switchToEditMode(true);

        });

        //表单提交
        form.on('submit(form_edit_user_submit)', function(data){
            let field = data.field;
            console.log('field', field);
            let defaultFormData = $(data.elem).data('defaultFormData') || {};
            console.log('default', defaultFormData);
            //去除重复数据
            for(let key in field){
                if(key in defaultFormData && defaultFormData[key] == field[key]){
                    delete field[key];
                }
            }
            field.user_id = defaultFormData.user_id;
            if(Object.keys(field) < 2){
                return false;
            }
            console.log("提交", field);
            let loadingIndex = layer.load(2);
            $.ajax({
                type: "POST",
                url: "/user/update",
                data: field,
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg("修改成功");
                    }
                    else {
                        layer.msg(res.msg || "修改失败");
                    }
                },
                error : function() {
                    layer.msg("请求失败");
                },
                complete:function () {
                    //隐藏修改按钮
                    $("#info-edit").addClass("layui-hide");
                    //显示保存按钮
                    $("#info-submit").removeClass("layui-hide");

                    layer.close(loadingIndex);
                }
            });

            return false;
        });
    }

    //添加用户表单提交
    //监听查询用户的过滤表单提交
    form.on('submit(form_add_user_submit)', function(data){
        // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
        // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
        // console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
        let field = data.field;
        console.log('field', field);

        let loadingIndex = layer.load(2);
        $.ajax({
            url: '/user/add',
            type: 'post',
            data: field,
            success: (res)=> {
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1, shade: 0.4, time: 1000});
                } else {
                    layer.msg(res.msg, {icon: 5, shade: 0.4, time: 1000});
                }
            },
            error: (res)=>{
                layer.msg('请求错误-' + res.status || '', {icon: 5});
            },
            complete: ()=>{
                layer.close(loadingIndex);
            }
        });
        return false;
    });
});